<template>
  <div class="editInfo">
    <!-- 头部导航 -->
    <hmnavbar
      path="/info"
      :title="title"
      :showBtn="isShow"
      @mysave="update"
    ></hmnavbar>
    <van-cell-group class="mygroup" v-if="prop !== 'avatar'">
      <van-field class="myfield" v-model="value" />
    </van-cell-group>
    <div class="box" v-else>
      <van-uploader
        v-model="fileList"
        class="myupload"
        :max-count="1"
        :after-read="afterRead"
        :before-read="beforRead"
      />
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
// 导入修改的方法
import { editApi, uploadApi } from '@/api/au.js'
export default {
  data () {
    return {
      value: '',
      title: '',
      // 要操作的属性
      prop: '',
      // 设置上传的图片
      fileList: []
    }
  },
  computed: {
    ...mapState(['userInfo']),
    // 添加一个属性：用来控制右侧的保存按钮是否显示
    isShow: function () {
      return this.value !== this.userInfo[this.prop]
    }
  },
  methods: {
    beforRead (file) {
      // 上传图片之前对图片大小进行限制
      console.log(file)
      // 限制图片的格式为 png
      var isPng = file.type === 'image/jpeg'
      // 限制图片大小小于 2M
      var limit2M = file.size / 1024 / 1024 < 2
      // 添加提示信息
      if (!limit2M) {
        this.$toast.fail('对不起，图片大小不能超过 2M')
      }
      if (!isPng) {
        this.$toast.fail('对不起，图片只能为 jpg')
      }
      return limit2M && isPng
    },
    // 选中图片之后会触发
    async afterRead (file) {
      // 得到要上传的图片对象
      // console.log(file.file)
      // 请求上传的接口
      const res = await uploadApi(file.file)
      // // 得到上传成功的图片地址
      // console.log(res.data[0].url)
      // 显示保存按钮
      this.value = res.data[0].id
    },
    // 点击头部导航中的保存按钮时会触发
    async update () {
      // 添加加载效果
      this.$toast.loading('加载中...')
      // 将修改后的数据提交到服务器
      await editApi({
        [this.prop]: this.value
      })
      // 更新数据
      this.$store.dispatch('setUserInfo')
      // 成功提示
      this.$toast.success('修改成功')
      // 重新跳转到 info 页面
      this.$router.push('/info')
    }
  },
  created () {
    // 接收要操作的属性
    this.prop = this.$route.query.prop
    // 判断
    if (this.prop === 'nickname') {
      // 动态设置标题
      this.title = '修改昵称'
    } else if (this.prop === 'intro') {
      // 动态设置标题
      this.title = '修改简介'
    } else if (this.prop === 'avatar') {
      // 动态设置标题
      this.title = '修改头像'
      // 设置默认图片
      this.fileList.push({
        url: process.env.VUE_APP_URL + this.userInfo.avatar
      })
    }
    // 给输入框动态设置内容
    this.value = this.userInfo[this.prop]
  }
}
</script>

<style lang="less" scoped>
.editInfo {
  .mygroup {
    padding: 15px;
    .myfield {
      background-color: #eee;
    }
  }
  .box {
    display: flex;
    justify-content: center;
    .myupload {
      /deep/ .van-uploader__upload,
      /deep/ .van-image,
      /deep/ .van-image__img {
        width: 200px;
        height: 200px;
      }
    }
  }
}
</style>
